<template>
    <div class="doc" v-if="!loading">
        <div class="relative" style="flex: 3">
            <div class="left h100 ovy">
                <div style="padding-left: 10px;padding-right: 10px; padding-bottom: 10px;">
                    <h5>请求地址</h5>
                    <div>{{data.method}} {{data.url}}</div>
                    <template v-if="data.desc">
                        <h5>接口说明</h5>
                        <div v-html="data.desc"></div>
                    </template>
                    <h5>请求头</h5>
                    <el-table :data="headers"
                              border
                              stripe
                              :show-header="false"
                    >
                        <el-table-column prop="key"></el-table-column>
                        <el-table-column prop="value"></el-table-column>
                    </el-table>
                    <h5>请求参数</h5>
                    <el-table :data="data.req"
                              border
                              stripe
                              row-key="id"
                              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                              default-expand-all
                    >
                        <el-table-column label="参数名" prop="en"></el-table-column>
                        <el-table-column label="类型">
                            <template slot-scope="scope">
                                {{scope.row.type || 'string'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="描述" prop="cn"></el-table-column>
                    </el-table>
                    <template v-for="(v,i) in (data.reqExt || [])">
                        <h5>{{i}}</h5>
                        <el-table :data="v"
                                  border
                                  stripe
                                  row-key="id"
                                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                                  default-expand-all
                        >
                            <el-table-column label="参数名" prop="en"></el-table-column>
                            <el-table-column label="类型">
                                <template slot-scope="scope">
                                    {{scope.row.type || 'string'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="描述" prop="cn"></el-table-column>
                        </el-table>
                    </template>
                    <h5>返回参数</h5>
                    <el-table :data="data.resp||[]"
                              border
                              stripe
                              row-key="id"
                              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                              default-expand-all
                    >
                        <el-table-column label="参数名" prop="en"></el-table-column>
                        <el-table-column label="类型">
                            <template slot-scope="scope">
                                {{scope.row.type || 'string'}}
                            </template>
                        </el-table-column>
                        <el-table-column label="描述" prop="cn"></el-table-column>
                    </el-table>
                    <template v-for="(v,i) in (data.respExt||[])">
                        <h5>{{i}}</h5>
                        <el-table :data="v"
                                  border
                                  stripe
                                  row-key="id"
                                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                                  default-expand-all
                        >
                            <el-table-column label="参数名" prop="en"></el-table-column>
                            <el-table-column label="类型">
                                <template slot-scope="scope">
                                    {{scope.row.type || 'string'}}
                                </template>
                            </el-table-column>
                            <el-table-column label="描述" prop="cn"></el-table-column>
                        </el-table>
                    </template>
                    <el-alert
                            v-if="data.respDesc"
                            :title="data.respDesc"
                            type="info"
                            :closable="false"
                            style="margin-top: 10px;"
                    >
                    </el-alert>

                    <el-alert
                            title="如无特殊说明，文档中将只显示有意义的字段，其余无用字段请无视"
                            type="info"
                            :closable="false"
                            style="margin-top: 10px;"
                    >
                    </el-alert>

                    <el-alert
                            title="如无特殊说明，所有参数均为必传"
                            type="info"
                            :closable="false"
                            style="margin-top: 10px;"
                    >
                    </el-alert>
                </div>

            </div>
            <el-backtop target=".left"></el-backtop>
        </div>

        <div class="relative" style="flex: 2">
            <div class="right h100 ovy">
                <div style="padding-left: 10px;padding-right: 10px;">
                    <el-tabs>
                        <el-tab-pane label="请求示例" v-if="data.reqEg">
                            <JsonViewer :expand-depth="10" :copyable="true" :value="data.reqEg"></JsonViewer>
                        </el-tab-pane>
                        <el-tab-pane label="返回示例" v-if="data.respEg">
                            <JsonViewer :expand-depth="10" :copyable="true" :value="data.respEg"></JsonViewer>
                        </el-tab-pane>

                    </el-tabs>
                </div>
            </div>
            <el-backtop target=".right"></el-backtop>
        </div>
    </div>
</template>

<script>
    import JsonViewer from "vue-json-viewer"

    export default {
        components: {
            JsonViewer
        },
        name: "Doc",
        computed: {
            headers() {
                var headers = [];
                if(!this.data.open){
                    headers.push({
                        key: "bpm-token",
                        value: "获得的令牌"
                    })
                }
                if (this.data.method == 'POST') {
                    headers.push({key: "Content-Type", value: "application/json"})
                }
                return headers;
            }
        },
        data() {
            return {
                data: {},
                loading: false,
                count: 0
            }
        },
        watch: {
            "$route": function () {
                this.load();
            }
        },
        mounted() {
            this.load();
        },
        methods: {
            load() {
                this.loading = true;
                this.$nextTick(async _ => {
                    var item = await import(`../doc/${this.$route.name}.js`)
                    this.data = item.default;
                    this.fix(this.data.resp || []);
                    this.fix(this.data.req || []);
                    for (var i in (this.reqExt || {})) {
                        this.fix(this.reqExt[i]);
                    }
                    for (var i in (this.respExt || {})) {
                        this.fix(this.respExt[i]);
                    }
                    this.data.method = this.data.method.toUpperCase();
                    this.loading = false;
                });
            },
            fix(items) {
                items.forEach(e => {
                    e.id = new Date().getTime() + "" + (this.count++)
                    this.fix(e.children || []);
                });
            }
        },
        // beforeRouteUpdate(){
        //     alert(2)
        //     this.load();
        // }
    }
</script>

<style scoped>
    .el-backtop {
        position: absolute;
    }

    .doc {
        display: flex;
    }

    .relative {
        position: relative;
    }
</style>